<template>
    <div class="bg page-orderpappraise">
    	<div class="title">
    		<img src="../assets/img/icon/home-bj.png" />
    		<h3>{{detail.ispServ&&detail.ispServ[0].name}}<span>({{detail.venderName}})</span></h3>
    		<p>合同号:&nbsp;{{detail.contractNO}}</p>
    	</div>
    	<ul class="star-cont">
    		<li key="{n}" @click="appraise(n)" v-for="n in 5" :class="[n<=appraiseNum?'ef':'']"></li>
    	</ul>
    	<button @click="submit">提交</button>
    </div>
</template>

<script>

import http from '../services/http';
import { mapState } from 'vuex';

export default {
	name:'order-appraise',
    data() {
      return {
      	appraiseNum: 1,
      	detail: {},
      }
    },
    props:{
		toast:{
			type: Function,
			required: true
		},
	},
	methods:{
		appraise(num){
			this.appraiseNum = num;
		},
		submit(){
			let order = {...this.detail};
			order.assessment = this.appraiseNum;
			delete order.ispServ;
			delete order.order;
			if(order.CreateTime){delete order.CreateTime};
			if(order.createTime){delete order.createTime};
			
			http.put("/isp/api/v1/protected/order/updateOrder",{
				...order
			},redata=>{
				this.toast(redata.message);
				if(redata.success){
					this.$router.back(-1);
				}
			})
		},
	},
    mounted() {
    	const {orderId} = this.$route.query;
    	http.get(`/isp/api/v1/protected/order/{&{id}}`,{
    		id:orderId
    	},redata=>{
    		if(redata.success){
    			this.detail = {...redata.data};
    		}
    	})
    },
};

</script>

<style lang="scss">
.page-orderpappraise{
	height: 100%;
	background: #f5f5f5;
	padding-top: 10px;
	
	.title{
		position: relative;
		background: #ffffff;
		padding: 12px 10px;
		padding-left: 70px;
		margin-bottom: 10px;
		
		img{
			height: 45px;
    		width: 45px;
    		position: absolute;
    		left: 12px;
    		top: 12px;
		}
		
		h3{
			font-weight: 600;
    		color: #434a4d;
    		font-size: 1rem;
    		line-height: 25px;
    		height: 25px;
    		width: 100%;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    
		    span{
		    	font-weight: 600;
		    	font-size: 0.9rem;
		    	padding-left: 5px;
		    }
		}
		p{
			line-height: 20px;
			font-size: 0.9rem;
			color: #979797;
			overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		}
	}
	
	.star-cont{
		height: 70px;
		width: 100%;
		background: #ffffff;
		margin-bottom: 30px;
		white-space: nowrap;
		text-align: center;
		
		li{
			width: 14%;
			height: 100%;
			display: inline-block;
			background: transparent url(../assets/img/icon/star_1.png) no-repeat center/ 30px auto;
			cursor: pointer;
			
			&.ef{
				background: transparent url(../assets/img/icon/star_2.png) no-repeat center/ 30px auto;
			}
		}
	}
	
	
	
	button{
	    font-size: 1rem;
	    text-align: center;
	    line-height: 40px;
	    height: 40px;
	    width: 90%;
	    background: #2dbe60;
	    border-radius: 4px;
	    color: #ffffff;
	    margin: 0 5%;
	    cursor: pointer;
	}
	
	
}
	
</style>
